<!DOCTYPE html>
<html>
<head>
    {include file="public/header" /}
    <style>
        .prizeconfirm .layui-layer-btn {
            height:50%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .prizeconfirm .layui-layer-btn .layui-layer-btn0{
            border: 1px solid #dedede;
            background-color: #fff;
            color: #333;
            border-radius: 2px;
        }
        .prizeconfirm .layui-layer-content{
            display: none;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label required">题目</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="required" lay-reqtext="题目不能为空" placeholder="请输入题目" value="" class="layui-input" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">题目类型</label>
        <div class="layui-input-block">
            <input type="radio" name="type" value="1" title="单选" checked="">
            <input type="radio" name="type" value="2" title="多选">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">开启状态</label>
        <div class="layui-input-block">
            <input type="checkbox" checked=""  name="status" value="1" lay-skin="switch" lay-filter="switchStatus" lay-text="开启|关闭">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">答案设置</label>
        <div class="layui-input-block">
            <button class="layui-btn" onclick="createAnswer()">创建答案</button>
        </div>
    </div>
    <div class="layui-form-item " id="answer_table">
        <div class="layui-input-block answer_item">
            <div class="layui-form-item layui-form-pane">
                <div class="layui-inline">
                    <label class="layui-form-label">答案</label>
                    <div class="layui-input-inline" style="width:500px;">
                        <input type="text" name="context[]" lay-verify="required" lay-reqtext="" placeholder="请输入答案" value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">是否正确</label>
                    <div class="layui-input-inline" style="border:solid 1px #e6e6e6;height:36px;">
                        <input type="checkbox"  name="right_answer[]" value="2" lay-skin="switch" lay-filter="switchTest" lay-text="正确|错误">
                    </div>
                </div>
                <div class="layui-inline">
                    <a class="layui-btn layui-btn-danger data-count-delete" onclick="deleteAnswerItem(this)">删除</a>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
{include file="public/footer" /}
<script>
    var const_form;
    layui.use(['form','laydate'], function () {
        var form = layui.form,
            layer = layui.layer,
            laydate=layui.laydate,
            $ = layui.$;
        const_form=form;
        //监听指定开关
        var right_num=0;
        form.on('switch(switchTest)', function (data) {
            if(this.checked){
                this.value=1;
                let type=$("input[name='type']:checked").val();
                if(type==1&&(right_num+1)>1){
                    this.checked=!this.checked;
                    form.render("checkbox");
                    layer.msg("单选只可有一个正确答案");
                    return false;
                }
                right_num+=1;
            }else{
                this.value=2;
                right_num-=1;
            }
        });
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            $.ajax({
                url: "/admin/Active/question_add?action=ajax",
                type: 'post',
                async: true,
                data: data.field,
                dataType: 'json',
                success: function (res) {
                    if(res.status){
                        parent.layer.msg("操作成功!", {icon:1,time: 1000}, function () {
                            //重新加载父页面
                            parent.location.reload();
                        });
                        return;
                    }else{
                        layer.msg(res.msg);
                    }
                }
            });
            return false;
        });
    });
    function createAnswer()
    {
        $("#answer_table").append("<div class=\"layui-input-block answer_item\">\n" +
            "            <div class=\"layui-form-item layui-form-pane\">\n" +
            "                <div class=\"layui-inline\">\n" +
            "                    <label class=\"layui-form-label\">答案</label>\n" +
            "                    <div class=\"layui-input-inline\" style=\"width:500px;\">\n" +
            "                        <input type=\"text\" name=\"context[]\" lay-verify=\"required\" lay-reqtext=\"\" placeholder=\"请输入答案\" value=\"\" class=\"layui-input\">\n" +
            "                    </div>\n" +
            "                </div>\n" +
            "                <div class=\"layui-inline\">\n" +
            "                    <label class=\"layui-form-label\">是否正确</label>\n" +
            "                    <div class=\"layui-input-inline\" style=\"border:solid 1px #e6e6e6;height:36px;\">\n" +
            "                        <input type=\"checkbox\"  name=\"right_answer[]\" value=\"2\" lay-skin=\"switch\" lay-filter=\"switchTest\" lay-text=\"正确|错误\">\n" +
            "                    </div>\n" +
            "                </div>\n" +
            "                <div class=\"layui-inline\">\n" +
            "                    <a class=\"layui-btn layui-btn-danger data-count-delete\" onclick=\"deleteAnswerItem(this)\">删除</a>\n" +
            "                </div>\n" +
            "            </div>\n" +
            "        </div>");
        const_form.render();
    }

    function deleteAnswerItem(obj)
    {
        $(obj).parents(".answer_item").remove();
    }
</script>
</body>
</html>